<template>
  <div class="view-container sendMessage">

    <section class="view-section">
      <div class="table-wrap" ref="form">
        <el-form :model="message">
          <table border="0" cellspacing="1" cellpadding="0">
            <tbody>
            <tr>
              <td>收信人[内部用户]</td>
              <td>
                <el-select v-model="message.sendUsers" multiple placeholder="请选择">
                  <el-option
                    v-for="user in userList"
                    :key="user.userId"
                    :label="user.userName"
                    :value="user.userId">
                  </el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>收信人[外部号码]</td>
              <td>
                <p class="tip">号码之间请用逗号分隔或每行一条</p>
                <el-input type="textarea" v-model="message.recNumbers" :rows="5"></el-input>
              </td>
            </tr>
            <tr>
              <td>短信内容</td>
              <td>
                <p class="tip">每条70字，最多可拆分成3条发送，当前条数 <span class="msgCount" v-text="msgCount"></span></p>
                <el-input type="textarea" v-model="message.content" :maxlength="210" show-word-limit :rows="5"></el-input>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <el-button type="primary" @click="submitForm" :loading="saveLoading">发送</el-button>
                <el-button type="default" @click="resetForm">清空内容</el-button>
                <!--<el-button @click="showLen">查看字数</el-button>-->
              </td>
            </tr>
            </tbody>
          </table>
        </el-form>
      </div>

    </section>

  </div>
</template>

<script>
  import userAPI from '@/api/system/user'
  import simpleValidate from '@/utils/simpleValidate'
  export default {
    name: "SendMessage",
    data() {
      return {
        message:{
          sendUsers:[],
          recNumbers:'',
          content:''
        },
        userList:[],
        saveLoading:false
      }
    },
    created() {
      this.getUserList()
    },
    computed:{
      msgCount(){
        let len = this.message.content.trim().length
        len = parseInt(len / 70)
        return len === 3 ? len : len + 1
      }
    },
    methods: {
      showLen(){
        console.log(this.message.content.length)
      },
      getUserList(){
        userAPI.getList('','',1,100).then(res=>{
          this.userList = res.records
        }).catch(err=>{
          console.log(err)
        })
      },
      resetForm(){
        this.$refs['form'].resetFields()
      },

      save(){
        this.saveLoading = true
      },

      submitForm(){
        if(this.message.sendUsers.length === 0){
          this.$message.warning('请选择收信人')
          return false
        }

        if(this.message.recNumbers.trim().length === 0){
          this.$message.warning('请输入收信人号码')
          return false
        }

        if(!this.checkNumbers()){
          return  false
        }

        if(this.message.content.trim().length === 0){
          this.$message.warning('请输入短信内容')
          return false
        }

        let arr = []
        const content = this.message.content.trim()
        const len = this.msgCount
        for(let i=0;i<len;i++){
          arr.push(content.substring(i*70,(i+1)*70))
        }

        this.message.content = arr
        this.save()
      },
      isEmpty(val){
        return val === null || val.length === 0
      },
      checkNums(nums){
        console.log(nums.length)
        for(let i in nums){
          const num = nums[i]
          console.log(num)
          if(num === ''){
            nums.splice(i,1)
          }else if(!simpleValidate.validPhone(num)){
            this.$message.warning('号码'+num+'输入有误，请检查')
            return false
          }
        }
        console.log(nums)
      },
      checkNumbers(){
        let numbers = this.message.recNumbers.trim()
        let nums = []
        if(numbers.indexOf(',') !== -1){
          nums = numbers.split(',')
          if(!this.checkNums(nums)){
            return false
          }

        }else if(numbers.indexOf('，') !== -1){
          nums = numbers.split('，')
          if(!this.checkNums(nums)){
            return false
          }

        }else if(numbers.indexOf('\n') !== -1){
          nums = numbers.split('\n')
          if(!this.checkNums(nums)){
            return false
          }
        }else{
          // 视为一条
          nums.push(numbers)
          if(!this.checkNums(nums)){
            return false
          }
        }

        return true
      }
    }
  }
</script>

<style lang="scss">
  .sendMessage {
    .el-select {
      width: 100%;
    }
  }
</style>

<style scoped lang="scss">

  .table-wrap {
    position: relative;
    width: 600px;
    margin: 0 auto;

    table {
      width: 100%;
      border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;

      td {
        border-left:1px solid #d2d2d2;border-top:1px solid #d2d2d2;
        font-size: 13px;
        color: #3b3b3b;
        padding: 10px;
      }

      tr:last-of-type {
        text-align: center;
      }
    }

    .tip {
      font-size: 13px;
      margin-bottom: 10px;
      color:gray;
    }

    .msgCount {
      color:#1890ff;
    }
  }


</style>
